import React, { Component } from "react";
import 'katex/dist/katex.min.css';
// import katex from 'katex';

class AlgorithmHelper extends Component{
  constructor(props){
    super(props);

    this.init               = this.init.bind(this);
    this.initTest           = this.initTest.bind(this);
    this.importTrainDataset = this.importTrainDataset.bind(this);
    this.importTestDataset  = this.importTestDataset.bind(this);
    this.reset              = this.reset.bind(this);

    this.handleFileChanged  = this.handleFileChanged.bind(this);
    this.fileInput          = React.createRef();
  }

  init(){
    if(this.props.algorithmImp){
      this.props.algorithmImp.init();
    }
  }

  initTest(){
    if(this.props.algorithmImp){
      this.props.algorithmImp.initTest();
    }
  }

  importTrainDataset(event){
    this.importType = event.target.id;
    this.fileInput.current.click();
  }

  importTestDataset(event){
    this.importType = event.target.id;
    this.fileInput.current.click();
  }

  reset(){
    if(this.props.algorithmImp){
      this.props.algorithmImp.reset();
    }
  }

  // 算法描述也在算法实现类initDescriptionUI函数里实现
  // componentDidUpdate(){
  //   const algorithm = this.props.algorithm;

  //   if(!algorithm) return;

  //   const description = algorithm.description;

  //   const el = document.getElementById('description');
  //   if(description){
  //     katex.render(`${description}`, el, { throwOnError: false });
  //   }
  //   else{
  //     el.innerHTML='...';
  //   }
  // }


  handleFileChanged(event){
  
    // reader.readAsText(event.target.files[0]);
    const files = event.target.files;

    for(let i = 0, il = files.length; i < il; i++){
      let reader = new FileReader();
      reader.onload = (e) => {      
        if(this.props.algorithmImp){
          if(this.importType === 'local_train_dataset'){
            this.props.algorithmImp.loadTrainDS( e.target.result, {
              current:i,
              files  :files
            });
          }
          else if(this.importType === 'local_test_dataset'){
            this.props.algorithmImp.loadTestDS( e.target.result, {
              current:i,
              files  :files
            });
          }
            
        }
        if(i === files.length - 1){
          event.target.value = '';
        }
      };
      // reader.readAsText(files[i]);
      reader.readAsDataURL(files[i])
    }
  }

  render(){
    return (
      <div className="body">
        <input 
            type='file' 
            multiple={true}
            hidden={true}
            ref={this.fileInput} 
            onChange={this.handleFileChanged} 
        />
        <div className="title">{this.props.algorithm?this.props.algorithm.name:''}</div>
        <div className="head">算法描述</div>
        <div className="katex" id='description'>...</div>
        <div className="head">
          <label>收集数据</label>
          <button hidden={!this.props.algorithmImp} onClick={this.reset}>重置</button>
          <button hidden={!this.props.algorithmImp} onClick={this.init}>加载服务器数据集</button>
          <button hidden={!this.props.algorithmImp} 
            id='local_train_dataset'
            onClick={this.importTrainDataset}>选择本地训练集</button>
        </div>
        <div className="katex" id='collect'>...</div>
        <div className="head">
          <label>准备数据</label>         
        </div>
        <div className="katex" id='prepare'>...</div>
        <div className="head">
          <label>分析数据</label>
        </div>
        <div className="katex" id='analysis'>...</div>
        <div className="head">
          <label>训练算法</label>
        </div>
        <div className="katex" id='train'>...</div>
        <div className="head">
          <label>测试算法</label>
          <button hidden={!this.props.algorithmImp} onClick={this.initTest}>加载服务器数据集</button>
          <button hidden={!this.props.algorithmImp} 
            id='local_test_dataset'
            onClick={this.importTestDataset}>选择本地测试集</button>
        </div>
        <div className="katex" id='test'>...</div>
        <div className="head">
          <label>使用算法</label>
        </div>
        <div className="katex" id='usage'>...</div>
      </div>
    )
  }
}

export default AlgorithmHelper;